<!--  -->
<template>
  <div id="app">
    <div class="noMore" v-show="dataList.length == 0">
      <img src="../images/wushuju.png" alt="" />
    </div>
    <template v-show="dataList.length > 0">
      <div class="item" v-for="item in dataList" :key="item.id">
        <div class="group" v-show="item.alertPriceHigh">
          <span class="stockCode">{{ item.stockCode }}</span>
          <span class="stockName">{{ item.stockName }}</span>
          <span class="txt">股价高于</span>
          <span class="num"
            >{{ item.alertPriceHigh }}<span class="unit">元</span></span
          >
          <span class="del" @click="update(item, 0)">删除</span>
        </div>
        <div class="group" v-show="item.alertPriceLow">
          <span class="stockCode">{{ item.stockCode }}</span>
          <span class="stockName">{{ item.stockName }}</span>
          <span class="txt">股价低于</span>
          <span class="num"
            >{{ item.alertPriceLow }}<span class="unit">元</span></span
          >
          <span class="del" @click="update(item, 1)">删除</span>
        </div>
        <div class="group" v-show="item.alertPriceChgUp">
          <span class="stockCode">{{ item.stockCode }}</span>
          <span class="stockName">{{ item.stockName }}</span>
          <span class="txt">日涨幅超</span>
          <span class="num"
            >{{ item.alertPriceChgUp }}<span class="unit">%</span></span
          >
          <span class="del" @click="update(item, 2)">删除</span>
        </div>
        <div class="group" v-show="item.alertPriceChgDown">
          <span class="stockCode">{{ item.stockCode }}</span>
          <span class="stockName">{{ item.stockName }}</span>
          <span class="txt">日跌幅超</span>
          <span class="num"
            >{{ item.alertPriceChgDown }}<span class="unit">%</span></span
          >
          <span class="del" @click="update(item, 3)">删除</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { getUrlParams } from "../script/utils";
import { getList } from "../api/index";
const { userId } = getUrlParams();
export default {
  data() {
    return {
      dataList: [],
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const send = {
        userId: userId,
      };
      await getList(send).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.dataList = data;
        }
      });
    },
    async update(row, type) {
      const key = [
        "alertPriceHigh",
        "alertPriceLow",
        "alertPriceChgUp",
        "alertPriceChgDown",
      ][+type];
      const {
        alertPriceHigh,
        alertPriceLow,
        alertPriceChgUp,
        alertPriceChgDown,
        stockId,
        id,
      } = row;
      const send = {
        alertPriceHigh,
        alertPriceLow,
        alertPriceChgUp,
        alertPriceChgDown,
        stockId,
        userId,
        id,
      };
      send[key] = null;
      await update(send).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.getList();
          //   console.log(data);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#app {
  padding: 10px 0;
  .noMore {
    img {
      display: block;
      margin: 0 auto;
    }
  }
  .item {
    padding: 0 15px;
    line-height: 28px;
    .group {
      .stockCode,
      .stockName {
        font-size: 15px;
        color: #f4f636;
      }
      .txt {
        color: #ffffff;
        font-size: 15px;
        padding: 0 15px;
      }
      .num {
        font-size: 16px;
        color: #ff8a00;
        .unit {
          font-size: 15px;
          color: #ffffff;
        }
      }
      .del {
        font-size: 15px;
        text-decoration: underline;
        color: #8cb4f7;
        cursor: pointer;
        padding-left: 15px;
        &:hover {
          color: #ea2827;
        }
      }
    }
  }
}
</style>
